<template>
  <div>
    <!-- 搜索条 -->
    <search-bar></search-bar>
    <!-- <div class="search">
      <div class="search-item">
        <icon type="search"></icon>
        <span>搜索</span>
      </div>
    </div> -->
    <!-- 轮播图 -->
    <swiper
      indicator-dots="true"
      indicator-color="rgba(2,2,2,0.4)"
      autoplay="true"
    >
      <swiper-item v-for="(item, index) in swiperData" :key="index">
        <image mode="widthFix" :src="item.image_src" />
      </swiper-item>
    </swiper>
    <!-- 菜单 -->
    <div class="meun">
      <div class="meun-item" v-for="(item, index) in meunData" :key="index">
        <image :src="item.image_src" />
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="floor" v-for="(item1, index) in floorData1" :key="index">
      <div class="floor-title">
        <image :src="item1.floor_title.image_src" />
      </div>
      <div class="floor-content">
        <div class="left">
          <!-- <image :src="item1.product_list[0].image_src" /> -->
          <image :src="item1.leftImagePath" />
        </div>
        <div class="right">
          <!-- <image
            v-if="i > 0"
            v-for="(item2, i) in item1.product_list"
            :key="i"
            :src="item2.image_src"
          /> -->
          <image
            v-for="(item2, i) in item1.rightImagePath"
            :key="i"
            :src="item2.image_src"
          />
        </div>
      </div>
    </div>
    <!-- 回到顶部 -->
    <div class="top" v-show="flag" @click="toTop">
      <div>︿</div>
      <div>顶部</div>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request.js";
import SearchBar from "../../components/SearchBar.vue";
export default {
  data() {
    return {
      // 轮播图数据
      swiperData: [],
      // 分类菜单数据
      meunData: [],
      // 商品列表数据
      floorData: [],
      // 控制回到顶部按钮显示隐藏的标志位
      flag: false,
    };
  },
  components: {
    "search-bar": SearchBar,
  },
  computed: {
    floorData1() {
      // 对原有数据进行加工（把5张图片变成4张）
      return this.floorData.map((item) => {
        // console.log(item);
        // 左侧大图的地址（在数据中增添一个属性）
        item.leftImagePath = item.product_list[0].image_src;
        // 右侧小图的地址（在数据中增添一个属性）
        item.rightImagePath = item.product_list.filter((item, index) => {
          // 去掉索引为0的图片
          return index > 0;
        });
        return item;
      });
      // console.log(item);
    },
  },
  methods: {
    toTop() {
      // 控制页面回到顶部
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },
    // 初始化数据（最终优化-调数据）
    async initData() {
      const swiperRes = await request("home/swiperdata");
      this.swiperData = swiperRes.data.message;
      const meunRes = await request("home/catitems");
      this.meunData = meunRes.data.message;
      const floorRes = await request("home/floordata");
      this.floorData = floorRes.data.message;
      // console.log(this.floorData);
    },
  },
  created() {
    // mpvue是wx的别名
    // 调用后台接口获取轮播图数据
    // 第一次优化-调数据
    // mpvue.request({
    //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
    //   method: "GET",
    //   success: (res) => {
    //     // console.log(res);
    //     // 更新data中的轮播图数据
    //     this.swiperData = res.data.message;
    //   },
    // });
    // 第二次优化-调数据
    // request("home/swiperdata").then((res) => {
    //   this.swiperData = res.data.message;
    // });
    // 第一次优化-调数据
    // wx.request({
    //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
    //   method: "GET",
    //   success: (res) => {
    //     // console.log(res);
    //     // 更新data中的菜单数据
    //     this.meunData = res.data.message;
    //   },
    // });
    // 第二次优化-调数据;
    // request("home/catitems").then((res) => {
    //   this.meunData = res.data.message;
    // });
    // 最终优化
    this.initData();
  },
  onPageScroll(params) {
    // 页面滚动时触发
    // console.log(params.scrollTop);
    this.flag = params.scrollTop > 10;
  },
  onPullDownRefresh() {
    // 下拉刷新的时候触发（重新获取相关页面后台数据）
    this.initData();
  },
};
</script>

<style scoped lang="less">
// @import "./main.scss";
@import "./main.less";
</style>
